<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				个人资料
			</view>
		</u-navbar>
		<view class="main">
			<view class="cu-form-group">
				<view class="title">头像</view>
				<image class="u-avatar-demo" :src="get_user_face" mode="aspectFill" @tap="handleUpload"></image>
			</view>
			<view class="cu-form-group" @click="shows = true">
				<view class="title">昵称</view>
				<view class="text-gray">
					{{vuex_user_name}}<text class="cuIcon-right u-font-32 "></text>
				</view>
			</view>
			<view class="cu-form-group" @click="show = true">
				<view class="title">性别</view>
				<view class="text-gray">
					{{get_sex_name}}<text class="cuIcon-right u-font-32 "></text>
				</view>
				
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">手机号</view>
				<button class="text-gray" style="margin-top: 10rpx;border-radius: 50rpx;background-color: #FFFFFF;" open-type="getPhoneNumber" @getphonenumber="bindGetphonenumber">
					{{vuex_user_phone||'快速绑定手机'}}
				</button>
			</view> -->
			<view class="cu-form-group">
				<view class="title">ID号</view>
				<view class="text-gray">
					{{vuex_user_id||'--'}}
				</view>
			</view>	
		</view>
		<!-- <view class="flex justify-center">
			<view class="cu-btn bg-orange round">
				保存
			</view>
		</view> -->
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<u-modal v-model="shows" :show-cancel-button="true" confirm-color="#FE7E00" title="修改昵称" @confirm="amend">
			<view class="slot-content">
				<input type="text" :value="vuex_user_name"  @input="onKeyInputUserName" placeholder="请输入昵称" placeholder-class="u-font-26" class="u-font-26 text-center" />
			</view>
		</u-modal>
		
		
		<yq-avatar @upload="myUpload" ref="avatar" />
		<choose-image ref="chooseImage" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
                is_bind_wx:0,
				avatar: '../../static/images/avatar.png',
				
				show: false,
				shows: false,
				join_time:0,
				modName:'',
				
				list: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					},
					{
						value: '3',
						label: '保密'
					}
				],
				
			}
		},
		created() {
					
		},
        computed:{
        	get_sex_name(){
        		const user_sex = this.vuex_user_sex-0
                console.log("user_sex",user_sex)
        		let info = {}
        		for(let i=0;i<this.list.length;i++){
        			let item = this.list[i]
        			if(user_sex===(item['value']-0)){
        				info = item
        				break;
        			}
        		}
        		return info.label||''
        	},
        	get_bind_wx_name(){
        		return this.is_bind_wx-0 ? '解绑':'绑定' 
        	}
        },
        onLoad() {
            this.names = this.vuex_user_name
            this._initData()
        
        },
		methods: {
			Back(){
				uni.navigateBack({
				});
			},
            _initData(){
            	this.$u.http.post('/api/user/data',{
            		type:'personal',
            	}).then(({data})=>{
            		this.is_bind_wx = data.is_bind_wx||0
                    this.join_time = data.join_time||0
            	})
            },
			bindGetphonenumber(e){
				const detail = e.detail||{}
				console.log(detail)
				if(detail.errMsg=="getPhoneNumber:fail user deny"){
					this.$u.toast("已取消授权获取")
				}else{
					this.$u.http.post('/api/user/decodePhone',{
						auth_info: detail
					}).then(({data})=>{
						this.$u.vuex('vuex_user_phone', data.user_phone||"")
						this.$u.vuex('vuex_user_hide_phone', data.user_hide_phone||"")
					})
					
				}
			},
            onKeyInputUserName(e){
            	this.modName = e.detail.value
            	
            },
			handleUpload(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: '600upx',
					selHeight: '600upx',
				});
			},
			myUpload(rsp) {
				console.log(rsp.path)
				this.$refs['chooseImage'].uploadFile({type:'avatar'},rsp.path,(params,res)=>{
					this.handleSave({
						avatar:res.key
					}).then(({msg})=>{
						this.$u.vuex('vuex_user_avatar', res.key)
					})
					
				})
			},
            handleSave(params,fnc){
            	console.log(params)
            	return this.$u.http.post('/api/user/modInfo',params)
            },
			
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e)
                var sex = 0
                e.forEach(function(item){
                    sex = item.value
                })
				console.log(sex)
                this.handleSave({
                	sex:sex
                }).then(({msg})=>{
                	this.$u.vuex('vuex_user_sex', sex)
                })
			},
			// 修改昵称
			amend(){
                this.handleSave({
                	name:this.modName
                }).then(({msg})=>{
                	this.$u.vuex('vuex_user_name', this.modName)
                })
			}
		}
	}
</script>

<style lang="scss">
	.main {
		margin: 30rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.cu-form-group{
		background-color: transparent;
	}
	.u-avatar-demo {
		width: 65rpx;
		height: 65rpx;
		border-radius: 100rpx;
	}
	.cuIcon-right{
		margin-left: 8rpx;
	}
	.slot-content{
		margin: 40rpx 0;
	}
	.cu-btn{
		margin: 190rpx auto;
		width: 527rpx;
		height: 82rpx;
		font-size: 32rpx;
	}
</style>
